<template>
  <a-modal
    :title="`服务商${model ? '编辑' : '新增'}`"
    :width="700"
    :visible="visible"
    :confirmLoading="loading"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-spin :spinning="loadingSpin">
      <a-form :form="form">
        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-item v-show="false" label="主键ID">
              <a-input v-decorator="['uid', { initialValue: 0 }]" disabled />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="请选择省">
              <a-select v-decorator="['provinceid']" placeholder="请选择省" @change="onProvinceChange">
                <a-select-option :value="item.provinceid" v-for="item in provinceList" :key="item.id">{{
                  item.province
                }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="请选择市">
              <a-select v-decorator="['cityid']" placeholder="请选择市" @change="onCityChange">
                <a-select-option :value="item.cityid" v-for="item in cityList" :key="item.id">{{
                  item.city
                }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="请选择区">
              <a-select v-decorator="['areaid']" placeholder="请选择区" mode="multiple">
                <a-select-option :value="item.areaid" v-for="item in areaList" :key="item.id">{{
                  item.area
                }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="用户名">
              <a-input v-decorator="['name']" placeholder="登录用户名" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="密码">
              <a-input v-decorator="['password']" placeholder="密码" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="手机号">
              <a-input v-decorator="['mobile']" placeholder="手机号" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="性别">
              <a-select v-decorator="['sex', { initialValue: 1 }]" placeholder="请选择性别">
                <a-select-option :value="1">男</a-select-option>
                <a-select-option :value="2">女</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="角色">
              <a-select v-decorator="['role_id']" placeholder="请选择角色">
                <a-select-option :value="item.id" v-for="item in roleList" :key="item.id">{{
                  item.name
                }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { provinceLink, cityLink, areaLink } from '@/api/notControl'
import { getRoleList } from '@/api/role'
import { managerAdd, managerEdit } from '@/api/managerProvider'
import formModalMixin from '@/mixins/formModalMixin'
const fields = ['name', 'areaid', 'cityid', 'sex', 'role_id', 'uid', 'provinceid', 'mobile']

export default {
  mixins: [formModalMixin],
  data () {
    this.fields = fields
    this.addAction = managerAdd
    this.editAction = managerEdit
    return {
      provinceList: [],
      cityList: [],
      areaList: [],
      roleList: [],
      loadingSpin: false
    }
  },
  created () {
    getRoleList().then(res => {
      this.roleList = res.data.data
    })
    provinceLink().then(res => {
      this.provinceList = res.data
    })
  },
  methods: {
    watchBefore (model) {
      this.loadingSpin = true
      try {
        model.areaid = JSON.parse(model.areaid)
      } catch (error) {}
      const { provinceid, cityid } = model
      return Promise.all([this.onProvinceChange(provinceid), this.onCityChange(cityid)])
        .finally(() => (this.loadingSpin = false))
    },
    onProvinceChange (provinceid) {
      return cityLink({ provinceid }).then(res => {
        this.cityList = res.data
        this.form.setFieldsValue({ cityid: undefined })
      })
    },
    onCityChange (cityid) {
      return areaLink({ cityid }).then(res => {
        this.areaList = res.data
        this.form.setFieldsValue({ areaid: [] })
      })
    },
    handleOkBefore (values) {
      const province = this.provinceList.find(province => province.provinceid === values['provinceid'])
      const city = this.cityList.find(city => city.cityid === values['cityid'])
      const area = this.areaList.filter(area => values['areaid'].includes(area.areaid)).map(area => area.area)
      const params = {
        ...values,
        province: (province && province.province) || undefined,
        city: (city && city.city) || undefined,
        area: area || undefined
      }
      return params
    }
  }
}
</script>
<style lang="less" scoped>
/deep/.ant-modal-body {
  padding: 24px 48px;
}
</style>
